<template>
  <div>
  <el-card>
        <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="min-height: 40vh">
            <div id="bar" style="width:100%;height:38vh"></div>
        </el-card>
        <el-card style="min-height: 39vh;margin-top:10px">
              <div id="pie" style="width:100%;height:38vh"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="min-height: 80vh">
          <el-form :model="form" inline>
            <el-form-item>
              <el-cascader
                v-model="keys"
                @change="changeCascader"
                clearable
                :options="options"
                :props="prop"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="物资名称"
                clearable
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <el-table :data="list">
            <el-table-column prop="name" label="图片" align="center">
              <template>
                <el-image>
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="model"
              label="规格"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stock"
              label="库存"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              align="center"
            ></el-table-column>
          </el-table>
           <pageTools
      :total="total"
      :paginationPage="form.pageNum"
      :paginationPagesize="form.pageSize"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    ></pageTools>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
  </div>
</template>

<script>
import { list } from '../../../api/stock'
import { list as getParent } from '../../../api/categories'
export default {
  data () {
    return {
      form: {
        name: '',
        pageSize: 5,
        pageNum: 1,
        categorys: ''
      },
      options: [],
      keys: [],
      prop: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      list: [],
      total: 0,
      barId: null,
      pieId: null
    }
  },
  methods: {
    pageChange (val) {
      this.form.pageNum = val
      this.getList()
    },
    pageSizeChange (val) {
      this.form.pageSize = val
      this.getList()
    },
    changeCascader (e) {
      this.form.categorys = e.join(',')
    },
    handleSearch () {
      this.form.pageNum = 1
      this.getList()
    },
    async getList () {
      const res = await list(this.form)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.list = res.data.rows
      this.total = res.data.total
      const x = res.data.rows.map(i => {
        return i.name
      })
      const y = res.data.rows.map(i => {
        return i.stock
      })
      const s = res.data.rows.map(i => {
        return {
          name: i.name,
          value: i.stock
        }
      })
      this.initBar(x, y)
      this.initPie(s, x)
    },
    async getParentFn () {
      const res = await getParent()
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.options = res.data.rows
    },
    initBar (xd, yd) {
      this.barId = this.$echarts.init(document.getElementById('bar'))
      const option = {
        title: {
          text: '库存条形图'
        },
        xAxis: {
          type: 'category',
          data: xd
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yd,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 40,
            itemStyle: {
              normal: {
                // 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    '#0780cf ', '#fa6d1d ', '#ac2026 ', '#701866 ', '#d22e8d ',
                    '#FE8463', '#a195c5 ', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#a195c5  ', '#F4E001', '#F0805A', '#63b2ee'
                  ]
                  return colorList[params.dataIndex]
                },
                // 以下为是否显示，显示位置和显示格式的设置了
                label: {
                  show: true,
                  position: 'top',
                  //                             formatter: '{c}'
                  formatter: '{b}\n{c}'
                }
              }
            }
          }
        ]
      }
      this.barId.setOption(option)
    },
    initPie (sData, leData) {
      this.pieId = this.$echarts.init(document.getElementById('pie'))
      const option = {
        title: {
          text: '库存占比图',

          left: 'left'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {} // 导出图片
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: leData
        //   selected: this.selected
        },
        series: [
          {
            name: '物资名称',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: sData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.pieId.setOption(option)
    }
  },
  created () {
    this.getList()
    this.getParentFn()
  },
  mounted () {
    // this.initBar()
  }
}
</script>

<style>
</style>
